<template>
  <section>
    <h3>The words:</h3>
    <ul>
      <grm-label
        :word="word"
        v-for="(word, index) in words"
        :index="index"
        :key="index"></grm-label>
    </ul>
  </section>
</template>
<script>
  import { mapGetters } from 'vuex'
  import GrmLabel from './GrmLabel'
  export default {
    components: {
      GrmLabel
    },
    computed: mapGetters(['words'])
  }
</script>

<style lang="less" scoped>
  h3 {
    margin-top: 20px;
    text-align: left;
  }
  ul, li {
    margin: 0;
    padding: 0;
  }

  li {
    margin-top: 10px;
    text-align: left;
    padding-left: 20px;
    font-size: 16px;
  }
</style>
